<template>
    <div class="api-document">
        <div style="padding: 10px 0;height: 30px;background: rgba(97, 175, 254, .1);margin: 5px 0;">
            <span class="method forbid-select">{{ apiInfo.method?.toUpperCase() }}</span>
            <span class="url">{{ apiInfo.url }}</span>
        </div>
        <el-scrollbar style="width: 100%;height: calc(100% - 80px);">
            <div style="padding: 10px 0 5px 0;">
                <span class="resp-title">请求数据类型</span>
                <span class="resp-value">application/x-www-form-urlencoded</span>
                <span class="resp-title">响应数据类型</span>
                <span class="resp-value">
                    {{ apiInfo.responses ? Object.keys(apiInfo.responses[200].content) : "" }}
                </span>
            </div>
            <h4 class="left-line">请求参数</h4>
            <el-table :data="apiInfo.parameters" border header-cell-class-name="el-table-header-cell"
                cell-class-name="el-table-cell" class="e-page">
                <el-table-column prop="name" label="参数名称" width="200" />
                <el-table-column prop="description" label="参数说明" min-width="220" />
                <el-table-column prop="in" label="请求类型" width="200" />
                <el-table-column prop="required" label="是否必填" width="200" />
                <el-table-column prop="schema.type" label="数据类型" width="200">
                    <template #default="scope">
                        <span>{{ firstUpperCase(scope.row.schema?.type) + (scope.row.schema?.format ? "(" +
                            scope.row.schema.format + ")" : "") }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <h4 class="left-line">响应参数</h4>
            <el-table :data="apiInfo?.responseModel" border header-cell-class-name="el-table-header-cell"
                cell-class-name="el-table-cell" class="model-table">
                <el-table-column prop="name" label="参数名称" min-width="200px" />
                <el-table-column prop="info.type" label="参数类型" min-width="400px">
                    <template #default="scope">
                        <span>{{ showResponseType(scope.row) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <h4 class="left-line">参数说明</h4>
            <el-table :data="apiInfo.responses?.property" border header-cell-class-name="el-table-header-cell"
                cell-class-name="el-table-cell" class="e-page">
                <el-table-column prop="name" label="参数名称" width="200" />
                <el-table-column prop="value" label="参数描述" min-width="220" />
                <el-table-column prop="type" label="数据类型" width="200">
                    <template #default="scope">
                        <span>{{ firstUpperCase(scope.row.type) }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
</template>

<script setup>
import router from '@/router'
import instance from "@/pinia"
import { firstUpperCase } from "@/utils/tools"

const { mainStore } = instance
let apiInfo = $ref({})

const showResponseType = (row) => {
    return row.info.$ref ? "Refer: " + row.info.$ref.rsplit("/", 1)[1] : firstUpperCase(row.info.type) + (row.info.format ? "(" + row.info.format + ")" : "")
}

onMounted(() => {
    apiInfo = mainStore.getUrlMap[router.currentRoute.value.path]
    const comp = apiInfo.responses[200].content["*/*"].schema.$ref
    let resp = null
    if (comp.startsWith("#")) {
        for (let key of comp.substring(2, comp.length).split('/')) {
            resp = { ...(resp || mainStore.getApiInfo)[key] }
        }
    }
    apiInfo.responseModel = Object.keys(resp.properties).map(e2 => { return { name: e2, info: { ...resp.properties[e2] } } })
})

</script>

<style>
.api-document {
    padding: 10px;
    height: 100%;
}

.api-document .method {
    display: inline-flex;
    width: 100px;
    background: #61affe;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-left: 10px;
    color: white;
}

.api-document .url {
    display: inline-flex;
    width: calc(100% - 130px);
    height: 100%;
    padding-left: 20px;
}

.api-document .resp-title {
    display: inline-block;
    width: 120px;
    text-align: center;
}

.api-document .resp-value {
    display: inline-block;
    width: calc(50% - 120px);
    text-align: center;
}

.api-document .left-line {
    border-left: 3px solid #21df14;
    padding-left: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
}
</style>